<template>
  <div class="demo12">
    <div class="pages">

      <div class="prev" @click="prev">
        &lt
      </div>
      <span>{{curIndex}}</span> / <span>{{totalNumber}}</span>
      <div class="next" @click="next">
        &gt
      </div>
      <input type="text" v-model="number">
      <button @click="handleGo">go</button>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'demo12',
    components: {},
    props: {},
    data() {
      return {
        curIndex: 1,
        totalNumber: 9,
        number: 1
      };
    },
    mounted() {
    },
    methods: {
      prev() {
        //如果当前页数等于1 不做操作 否则当前页数--
        if (this.curIndex == 1) {
          return

        } else {
          this.curIndex--
        }
      },
      next() {
        //如果当前页数等于总页数 不做操作 否则 当前页数++
        if (this.curIndex == this.totalNumber) {
          return
        } else {
          this.curIndex++
        }

      },
      handleGo() {
        // 1. 判断输入是否合法  不合法直接返回
        // 2.如果输入值大于总页数,输入值改成总页数,如果小于1,输入值改成1
        // 3.当前值修改为输入值

      }
    },
    computed: {}
  };
</script>

<style scoped lang="less">
  .pages {
    display: inline-block;

    .prev, .next {
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      border: 1px solid #ccc;
      text-align: center;
      border-radius: 3px;
      cursor: pointer;
      transition: all 1s;

      &:hover {
        color: blue;
        border-color: blue;


      }
    }


  }
</style>

